<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和事件捕获</title>
</head>
<body>
    <div id="id1">
        <div id="id2">
            <button id="id3">id3按钮</button>
        </div>
    </div>
    <script>
        <!--事件传递机制 -->
        var id1 = document.querySelector('#id1')
        var id2 = document.querySelector('#id2')
        var id3 = document.querySelector('#id3')
        //微软:事件冒泡，从里到外
        id1.addEventListener('click',function (event) {
            console.log('click id1',event)
        })
        id2.addEventListener('click',function (event) {
            console.log('click id2',event)
        })
        id3.addEventListener('click',function (event) {
            console.log('click id3',event)
            //让事件停止冒泡
            event.cancelBubble = true
        })
        //网景:事件捕获，从外到里
        //事件捕获是addEventListener 的第三个参数 useCapture
        id1.addEventListener('click',function (event) {
            console.log('click id1',event)
        },true)
        id2.addEventListener('click',function (event) {
            console.log('click id2',event)
        },true)
        id3.addEventListener('click',function (event) {
            console.log('click id3',event)
            //让事件停止冒泡
            event.cancelBubble = true
        },true)
    //从外到里，再从里到外

    </script>
</body>
</html>